<template>
  <div class="echart-series-pie-label">
    <FormItem
      :form="form"
      option="echart.series.0.label.show"
      :label="$demoi18n('echart.label.showLabels')"
      :helptip="hasTooltip ? $demoi18n('label.tooltip.pieLabelWrapText') : ''"
      type="switch"
      serie-type="pie"
    />
    <template v-if="hasProp('labelDisplaySetting')">
      <FormItem
        :form="form"
        option="echart.series.0.label.displayType"
        :label="$demoi18n('common.labelDisplayMode')"
        type="select"
        :options="labelDisplayType"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.lineHeight"
        :label="$demoi18n('word.lineHeight')"
        type="number"
        serie-type="pie"
      />
      <el-divider></el-divider>
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.name.color"
        :label="$demoi18n('common.label-pie.nameTextColor')"
        type="color"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.name.fontSize"
        :label="$demoi18n('common.label-pie.nameFontSize')"
        type="number"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.name.fontWeight"
        :label="$demoi18n('word.bold')"
        type="select"
        :options="fontWeightOptions"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.name.fontFamily"
        :label="$demoi18n('echart.label.fonts')"
        type="select"
        :options="fontFamilyOptions"
        serie-type="pie"
      />
      <el-divider></el-divider>
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.value.color"
        :label="$demoi18n('common.label-pie.numericTextColor')"
        type="color"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.value.fontSize"
        :label="$demoi18n('common.label-pie.numericFontSize')"
        type="number"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.value.fontWeight"
        :label="$demoi18n('word.bold')"
        type="select"
        :options="fontWeightOptions"
        serie-type="pie"
      />
      <FormItem
        :form="form"
        option="echart.series.0.label.rich.value.fontFamily"
        :label="$demoi18n('echart.label.fonts')"
        type="select"
        :options="fontFamilyOptions"
        serie-type="pie"
      />
      <div class="tip">
        <el-icon><InfoFilled /></el-icon>
        <span>{{ $demoi18n('common.label-pie.valueUnitAndProportionSharing') }}</span></div>
      <el-divider></el-divider>
    </template>
    <FormItem
      :form="form"
      option="echart.series.0.label.position"
      :label="$demoi18n('echart.label.labelPosition')"
      type="select"
      :options="pieSeriesLabelPositions"
      serie-type="pie"
    />
    <FormItem
      :form="form"
      option="echart.series.0.label._unit"
      :label="$demoi18n('word.unit')"
      type="input"
      serie-type="pie"
    />
    <FormItem
      :form="form"
      option="echart.series.0.label.alignTo"
      :label="$demoi18n('echart.label.labelAlignment')"
      type="select"
      :options="pieLabelAlignTos"
      serie-type="pie"
      :helptip="$demoi18n('pie.label.alignToTip')"
    />
    <FormItem
      :form="form"
      option="echart.series.0.minShowLabelAngle"
      :label="$demoi18n('echart.label.minimumSector')"
      type="number"
      :show-unit="true"
      :units="[{ label: '°', value: '°' }]"
      serie-type="pie"
    />
    <FormItem
      v-if="hasTotal"
      :form="form"
      option="showTotal"
      :label="$demoi18n('echart.label.showTotals')"
      type="switch"
      serie-type="pie"
    />
    <FormItem
      v-if="hasTotal"
      :form="form"
      option="totalDecimalCount"
      :label="$demoi18n('echart.label.totalDecimal')"
      type="number"
      serie-type="pie"
    />
    <FormItem
      :form="form"
      option="percentDecimalCount"
      :label="$demoi18n('echart.label.percentDecimal')"
      type="number"
      serie-type="pie"
    />
    <EchartPropertyPopup
      :form="form"
      component="series/labelLine/labelLine-pie"
      :title="$demoi18n('echart.label.leadSetup')"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import {
  pieSeriesLabelPositions,
  pieLabelAlignTos,
  labelDisplayType,
  fontWeightOptions,
  fontFamilyOptions,
} from '@/components/common/echart/form-item-options.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import EchartPropertyPopup from '@/components/common/echart/echart-property-popup.vue';
export default {
  components: { FormItem, EchartPropertyPopup },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      pieSeriesLabelPositions,
      pieLabelAlignTos,
      labelDisplayType,
      fontWeightOptions,
      fontFamilyOptions,
    };
  },
  computed: {
    hasTotal() {
      const { _componentName } = this.form.echart;
      const arr = ['basic-pie', 'multidimensional-pie'];
      return arr.includes(_componentName);
    },
    hasTooltip() {
      const { _componentName } = this.form.echart;
      const arr = ['basic-pie', 'multidimensional-pie', 'rose-pie'];
      return arr.includes(_componentName);
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.echart-series-pie-label {
  .tip {
    color: #409eff;
    font-size: 12px;
    padding: 0 0 0 20px;
  }
}
</style>
